<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<!--以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--显示窗口 宽度是客户端的屏幕宽度（就是 满屏 ！），显示的文字和图形的初始比例是1.0-->
	<title></title>
	<link rel="stylesheet" type="text/css" href="../static/css/register.css">
	<link href="../static/css/bootstrap.css" rel="stylesheet">
	<link href="../static/css/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
	<script src="../static/js/jquery-1.11.0.min.js" ></script>
	<script src="../static/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="../static/js/updatelogin.js" ></script>
</head>
<body>
	<div id="Wrapper"style="overflow-y: auto;">
	<div class="container ">
		<div class="row">
			<h1><spring:message code="registered"/> </h1><br />
			<a href="?lang=zh_CN"><spring:message code="language.cn"/></a> &nbsp;&nbsp;&nbsp;
			<a href="?lang=en_US"><spring:message code="language.en"/></a>
			<!--水平表单 -->
			<form class="form-horizontal " id="loginForm">
				<div class="form-group">
					<input type="text" class="form-control" name="userName" id="username" placeholder="<spring:message code="username"/> ">
					<i class="fa fa-user"></i>
					<span class="uesr"></span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" name="passWord" id="password" placeholder="<spring:message code="password"/>">
					<i class="fa fa-lock"></i>
					<i class="fa fa-eye" style="margin-left: 350px;"onclick="show1()"></i>
					<span class="pass"></span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" name="passwordOK" id="passwordOK" placeholder="<spring:message code="confirm"/>"onkeyup="validate()">
					<i class="fa fa-lock"></i>
					<i class="fa fa-eye" style="margin-left: 350px;"onclick="show2()"></i>
					<span id="prompt"></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="chineseName" id="chineseName" placeholder="<spring:message code="name"/>" >
					<i class="fa fa-home"></i>
					<span class="cname"></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="email" id="email" placeholder="<spring:message code="emile"/>" >
					<i class="fa fa-envelope-o"></i>
					<span class="yx"></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="telNumber" id="telNumber" placeholder="<spring:message code="telephoneNumber"/>" >
					<i class="fa fa-phone"></i>
					<span class="tn"></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="gitlabNumber" id="gitlabNumber" placeholder="<spring:message code="account" />" >
					<i class="fa fa-address-card-o"></i>
					<span class="gn"></span>
				</div>
				<div class="form-group">
					<label class="lab"><spring:message code="code"/>:</label>
    				<input type="text" id="ca" placeholder="<spring:message code="pleaseCode"/>" class="input-val" />
       				<canvas id="canvas" width="100" height="40"></canvas>
       				<span id="sp"></span>
				</div>
				<div class="form-group">
					<p id="p1"></p>
					<input type="button" id="button"  class="btn btn-info"value="<spring:message code="register"/>"/>
					<input type="button" id="reset" class="btn btn-danger"value="<spring:message code="reset"/> " />
				</div>
				<a href="/demo/login"><spring:message code="returnLogin"/> </a>
			</form>
	    </div>
	</div>
    </div>
</body>
<script>
    $(function() {
        //用户名验证
        $(".form-group input").keyup(function() {
            if($("span").text()!=''	){
                $("#button").attr("disabled", true);
            }else{
                $("#button").attr("disabled", false);
            }
        var uesr =/^[a-zA-Z][a-zA-Z0-9_]{6,12}$/;
        $("#username").keyup(function() {
            if(!uesr.test($("#username").val())) {
                $(".uesr").text('<spring:message code="netAccountFormat"/> ').css('color','red');
            } else {
                $(".uesr").text("");
            }
        });

        //密码验证
        var pass = /^(?![_@#!?$%^&*()+=-`~.,;/]+$)(?![0-9]+$)[0-9A-Za-z_@#!?$%^&*()+=-`~.,;/]{8,16}$/;
        $("#password").keyup(function() {
            if(!pass.test($("#password").val())) {
                $(".pass").text('<spring:message code="passwordFormat"/> ').css('color','red');
            } else {
                $(".pass").text("");
            }
        });
			// 验证码输入框
			$("#ca").keyup(function(){
			    $("#sp").text("");
			})
        //中文名验证
        var cname =/^[\u4E00-\u9FA5]{2,10}$/;
        $("#chineseName").keyup(function() {
            if(!cname.test($("#chineseName").val())) {
                $(".cname").text('<spring:message code="chineseName"/> ').css('color','red');
            } else {
                $(".cname").text("");
            }
        });

        //邮箱验证
        var yx =/^[a-zA-Z0-9_.-]+(@[a-zA-Z0-9]{2,5})*\.[com]{3}$/;
        $("#email").keyup(function() {
            if(!yx.test($("#email").val())) {
                $(".yx").text('<spring:message code="notEmailFormat"/> ').css('color','red');
            } else {
                $(".yx").text("");
            }
        });

        //电话验证
        var tn =/(\d{15})|(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/
        $("#telNumber").keyup(function() {
            if(!tn.test($("#telNumber").val())) {
                $(".tn").text('<spring:message code="telFormat"/> ').css('color','red');
            } else {
                $(".tn").text("");
            }
        });

        //gitlab验证
        var gn =/^[A-Za-z_]{0,25}$/;
        $("#gitlabNumber").keyup(function() {
            if(!gn.test($("#gitlabNumber").val())) {
                $(".gn").text('<spring:message code="gitlabNum"/> ').css('color','red');
            } else {
                $(".gn").text("");
            }
        });
        })
            $("#button").click(function(){
                if($(".form-group input").val()==''){
                    $("#p1").text("还有信息没输入").css("color","red")
                }
            })
        $("#reset").click(function(){
            $("#username").val('');
            $(".uesr").text("");
            $("#password").val('');
            $(".pass").text("");
            $("#passwordOK").val('');
            $("#prompt").text("");
            $("#chineseName").val('');
            $(".cname").text("");
            $("#email").val('');
            $(".yx").text("");
            $("#telNumber").val('');
            $(".tn").text("");
            $("#gitlabNumber").val('');
            $(".gn").text("");
            $("#sp").text('');
            $(".input-val").val("");
        })

    });

    function validate() {
        var pwd1 = $("#password").val();
        var pwd2 = $("#passwordOK").val();
        <!-- 对比两次输入的密码 -->
        if(pwd1 == pwd2) {
            $("#prompt").text('');
            $("#button").attr("disabled",false);
        } else {
            $("#prompt").text('<spring:message code="passwordsDifferent"/> ').css('color','red');
            $("#button").attr("disabled",true);
            ;
        }

    }

    function show1() {
        if($("#password").attr("type") == 'password') {
            $("#password").attr("type", "text");
        } else {
            $("#password").attr("type", "password");
        }
    }

    function show2() {

        if($("#passwordOK").attr("type") == 'password') {
            $("#passwordOK").attr("type", "text");
        } else {
            $("#passwordOK").attr("type", "password");
        }

    }
    $(document).ready(function (){
        var show_num = [];
        draw(show_num);

        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $("#button").click(function () {
            $("#sp").html('');
            var val = $(".input-val").val().toLowerCase();
            var num = show_num.join("");

            if(val==''){
                $("#sp").text("<spring:message code="codeNotNull"/>");
            }
            if(val != num && val !=''){
                $("#sp").text("<spring:message code="codeError"/>");
                $(".input-val").val('');
                draw(show_num);
            }
            if($("#sp").html() == '') {
                f();
            }
        });
	});

    function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }


    function f(){
        $.ajax({
            cache: true,
            type: "POST",
            url:"/register/subRegister",
            data:$('#loginForm').serialize(),// 你的formid
            async: false,
            error: function(request) {
                alert("Connection error:"+request.error);
            },
            success: function(r) {
                var data = JSON.parse(r);
                if(data.statue == 1){
                    alert(data.message);
                window.location.href = "/demo/login";
                }else{
                    alert(data.message);
				}
            }
        });
	}
</script>
</html>